Data Cache

warning.icon Next 14 ではデフォルトで有効だったが、15 では無効になった

fetch requests are no longer cached by default.

Next 14 以前のようにキャッシュを有効にするには、以下のように第 2 引数に指定する必要がある

code:ts

fetch('https://...', { cache: 'force-cache' })

概要

fetch で取得したデータが更新されない限り、キャッシュされたデータを返し続ける（永続的）

Request Memoization と異なるポイント

Request Memoization はレンダリングごとに保持されるため、永続的ではない

目的も違うが

第 2 引数で next.revalidate を指定すると、キャッシュの有効期限を指定できる

デフォルトは false で、リソースを無制限にキャッシュし続ける

code:ts

fetch('https://...', { next: { revalidate: 3600 } })

このようにキャッシュを更新する操作を Revalidate と呼ぶ

特に、有効期間を指定する Revalidate を Time-base Revalidation と呼ぶ

任意のタイミングで更新する Revalidate（On-demand Revalidation）もある

fetch 以外で似たような挙動を実現したい場合、unstable_cache を用いることができる

Request Memoization はレンダリングごとに保持されるため、永続的ではない

Request Memoization は React Component Tree でデータを再利用することを目的としている

そのため Route Handler 内では動作しないなど制約もある

動作フロー

warning.icon Request Memoization も同時に働くが、ここでは Data Cache の動きのみに注目する

https://scrapbox.io/files/66cdd3156972e3001d0c89cd.png

1. サーバサイドでレンダリング時に fetch が発生した場合、Request Memoization と Data Cache を順にチェックし、どちらのキャッシュも存在しないければ、実際のリクエストが行われる

2. レスポンスは Request Memoization と Data Cache に保存されつつ、クライアントに返される

3. 次の fetch に { cache: 'no-store' } が含まれている場合、Data Cache でのチェックはスキップされる

補足: オプションが異なるため、Request Memoization もキャッシュを返していない点に注意